<template>
	<view>
		<view style="height: 1rpx;width: 1rpx;"></view>
		<view class="address-each" v-for="(item,index) in addressList" @click="select(item)">
			<view class="image"><image :src="current == item.id ? '../../static/login/choosed.png' : '../../static/login/choose.png'" mode=""></image></view>
			<view class="address">{{item.address}}</view>
		</view>
		
		<view style="height: 120rpx;width: 1rpx;"></view>
		<view class="btn-box">
			<view class="PlaceAnOrder-btn" @click="confirmAddress">确定</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressList:[
					{id:1,address:'河南省郑州市管城回族区商都路街道郑东商业中心A区24h自助台球俱乐部'},
					{id:2,address:'河南省郑州市金水区商都路街道郑东商业中心B区24h自助台球俱乐部'},
					{id:3,address:'河南省郑州市二七区商都路街道郑东商业中心A区24h自助台球俱乐部'}
				],
				current:1,
				address:{}
			}
		},
		onLoad(option) {
			this.current = option.id
		},
		methods: {
			select(item){
				this.address = item
				this.current = item.id
			},
			confirmAddress(){
				const eventChannel = this.getOpenerEventChannel();
				eventChannel.emit('selectAddress',this.address);
				this.$back();
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F7F8FA;
	}
	.address-each {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 32rpx;
		margin-top: 24rpx;
		.image {
			width: 32rpx;
			height: 32rpx;
			padding-right: 24rpx;
			image {
				width: 32rpx;
				height: 32rpx;
			}
		}
		
		.address {
			font-weight: bold;
			font-size: 28rpx;
			color: #1C274C;
			line-height: 38rpx;
			padding: 32rpx;
			background: #FFF;
			border-radius: 16rpx;
		}
	}
	
	.btn-box {
		width: 100%;
		position: fixed;
		bottom: 40rpx;
		z-index: 9;
		.PlaceAnOrder-btn {
			width: 686rpx;
			height: 106rpx;
			margin: auto;
			background: #4BC264;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-weight: 800;
			font-size: 34rpx;
			color: #FFFFFF;
			line-height: 106rpx;
			text-align: center;
		}
	}
</style>
